<template>
    <el-row :gutter="20">
        <!-- 左侧用户组 -->
        <el-col :span="6" :xs="24">
            <Group @gruop-click="handleGruopClick" ref="groupsRef" @getId="getId" />
        </el-col>
        <el-col :span="18" :xs="24">
            <el-button type="primary" :disabled="queryParams.id==''" @click="openForm()"  v-hasPermi="['beidaUserGroup:saveOrUpdate']">
                添加用户
            </el-button>
            <el-button type="primary" :disabled="!multipleSelection.length" @click="remove" v-hasPermi="['beidaUserGroup:saveOrUpdate']">
                移除用户
            </el-button>
            <el-divider />
            <el-table v-loading="loading" :data="list" row-key="id" @selection-change="handleSelectionChange" ref="tableRef"   header-cell-class-name="custom-header" stripe>
                <el-table-column type="selection" label="" align="center" :reserve-selection="true" width="55" />
                <el-table-column label="姓名" align="center" prop="userName" :show-overflow-tooltip="true" />
                <el-table-column label="手机号" align="center" prop="phone" width="120" />
                <el-table-column label="工作单位" align="center" prop="workUnit" :show-overflow-tooltip="true" />
                <el-table-column label="行政区划" align="center" prop="regionAddress" :show-overflow-tooltip="true" />
                <el-table-column align="center" label="启用" prop="isEnable" width="100">
                        <template #default="scope">
                            <el-switch v-model="scope.row.isEnable" active-value="1" inactive-value="0" disabled />
                        </template>
                </el-table-column>
            </el-table>
            <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
                @pagination="getList" />
        </el-col>
    </el-row>
    <UserForm ref="userRef" @querySelect="querySelect" :oldUserIds="oldUserIds"/>
</template>

<script lang="ts" setup>
import * as userGroupApi from '@/api/infoArrive/teleMeeting/index'
import Group from './group.vue'
import UserForm from '@/views/infoArrive/arriveNotice/userGroup/userForm.vue'

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const groupsRef =ref()
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref<any>([]) // 列表的数
const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    id:''
})
const multipleSelection = ref<any>([])
const handleSelectionChange = (val) => {
    multipleSelection.value = val
}
// 去除用户方法
function removeCommonElements() {
    var oldArray = oldUserIds.value.split(',')
    var newArray = multipleSelection.value.map(item=>item.id)
    var oldSet = new Set(oldArray);
    var newSet = new Set(newArray);
    var toRemove = new Set([...oldSet].filter(item => newSet.has(item)));
 
    return oldArray.filter(item => !toRemove.has(item));
}
const tableRef = ref()
const remove =async ()=>{
    try {
        // 删除的二次确认
        await message.delConfirm()
        let newUserIds = removeCommonElements()
        // 发起删除
        await userGroupApi.saveGroup({id:queryParams.id,userIds:newUserIds.join(',')})
        tableRef.value!.clearSelection()
        message.success(t('common.delSuccess'))
        // 刷新列表
        await getList()
    } catch { }
}
/** 处理用户组被点击 */
const handleGruopClick = async (row) => {
    queryParams.id = row.id
    queryParams.pageNo = 1
      await getList()
}
/** 添加/修改操作 */
const userRef = ref()
const openForm = () => {
    userRef.value.open()
}
// 添加确认的回调
const querySelect = async (value)=>{
    let newUserIds = value.map(item=>item.id)
    let old = oldUserIds.value?oldUserIds.value.split(','):[]
    let query = {
        id:queryParams.id,
        userIds:[...old,...newUserIds].join(',') 
    }
    loading.value = true
    try {
        await userGroupApi.saveGroup({ ...query })
        message.success(t('common.updateSuccess'))
      // 发送操作成功的事件
      getList()
    } finally {
        loading.value = false
    }
}
/** 查询列表 */
const oldUserIds = ref() // 已添加人员ids
const getList = async () => {
    loading.value = true
    try {
        const data = await userGroupApi.getGroupDetail({...queryParams as any})
        list.value = data.allList?.records||[]
        total.value = data.allList?.total||0
        oldUserIds.value = data.userIds
    } finally {
        loading.value = false
    }
}
const getId =async (id)=>{
    queryParams.id = id
    if(queryParams.id=='') {loading.value=false; return};
    queryParams.pageNo = 1
    await getList()
}
defineExpose({ getList,groupsRef}) 
</script>

<style scoped lang="scss">
/* 使用::v-deep调整每一行的样式 */
::deep(.el-table) {
  .el-table__row {
    font-size: 16px;
    height: 40px;
    /* 设置每一行的高度 */
    line-height: 40px;
    /* 设置行内文本的垂直对齐 */
    color: #333333;
  }
}

:deep(.custom-header) {
  background-color: #F2F3F5 !important;
  /* 设置表头背景色 */
  color: #333 !important;
  /* 设置表头文字颜色 */
  font-weight: bold !important;
  /* 设置表头文字加粗 */
  height: 42px;
}
</style>